<template>
  <div class="shop">
    <!-- 导航栏 -->
    <van-nav-bar left-arrow @click-left="$router.back()" />
    <!-- 头部信息 -->
    <header
      class="description"
      :style="{backgroundImage: 'url(//elm.cangdu.org/img/'+ shopData.image_path + ')' }"
    >
      <div class="description-header">
        <div class="description_img">
          <van-image :src="'//elm.cangdu.org/img/'+shopData.image_path" />
        </div>
        <div class="description_info">
          <h4 class="description_title">{{shopData.name}}</h4>
          <p class="description_center">
            商家配送/分钟送达/
            <span
              v-if="shopData.piecewise_agent_fee"
            >{{shopData.piecewise_agent_fee.tips}}</span>
          </p>
          <p class="description_notice ellipsis">公告：{{shopData.promotion_info}}</p>
        </div>
        <van-icon class="icon-r" name="arrow" @click="show=true" />
      </div>
      <div class="description-footer">
        <div>
          <van-tag type="danger">减</van-tag>
          <span>满30减50，满60减8</span>
        </div>
        <div>
          <span>2个活动</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </header>
    <van-tabs v-model="active" class="po" sticky color="#3190E8" title-active-color="#3190E8">
      <!-- 商品 -->
      <van-tab title="商品">
        <van-tree-select :items="items" :main-active-index.sync="activeKey" @click-nav="btn">
          <template slot="content">
            <div v-for="(item,i) of items" :key="item.id" v-show="activeKey === i">
              <!-- 标题 -->
              <header class="menu_detail_header">
                <strong class="menu_item_title">{{item.name}}</strong>
                <span class="menu_item_description">{{item.description}}</span>
                <van-icon name="ellipsis" class="menu_detail_btn" @click="dialogInfo= !dialogInfo" />
                <!-- 提示 -->
                <p class="description_tip" v-show="dialogInfo">{{item.name}} {{item.description}}</p>
              </header>
              <!-- 商品 -->
              <div class="menu_detail_list" v-for="items of item.children" :key="items.id">
                <div class="detail_list_img">
                  <van-image
                    width="1.3rem"
                    height="1.3rem"
                    :src="'//elm.cangdu.org/img/'+items.image_path"
                    lazy-load
                  />
                </div>
                <div class="detail_list_info">
                  <div class="detail_info_title">
                    <p>{{items.name}}</p>
                    <van-tag v-if="items.attributes.length" type="danger" round plain>招牌</van-tag>
                  </div>
                  <p class="detail_info_description">{{items.description}}</p>
                  <div>
                    <span>{{items.rating_count}}评价</span>
                    <span>好评率{{items.satisfy_rate}}%</span>
                  </div>
                  <van-tag
                    v-if="items.activity"
                    plain
                    round
                    :color="'#'+items.activity.icon_color"
                    :text-color="'#'+items.activity.image_text_color"
                  >{{items.activity.image_text}}</van-tag>
                  <div class="info_price">
                    <p>¥{{items.specfoods[0].price}}</p>
                    <div>
                      <van-button
                        v-if="items.specifications.length"
                        type="info"
                        size="mini"
                        @click="addShopDialog"
                      >选规格</van-button>
                      <van-icon
                        v-else
                        name="add"
                        size=".4rem"
                        color="#3190e8"
                        @click="addShop(items)"
                      />
                      <!-- 小球 -->
                      <transition
                        @enter="enter"
                        @before-enter="beforeEnter"
                        @after-enter="afterEnter"
                      >
                        <van-icon
                          v-if="ballFlag"
                          ref="ball"
                          name="like"
                          class="icon_ball"
                          color="#f00"
                        />
                      </transition>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </van-tree-select>
      </van-tab>
      <!-- 评价 -->
      <van-tab title="评价">评价</van-tab>
    </van-tabs>
    <div class="shop_car" ref="shopCar">购物车</div>
    <!-- 添加商品dialog -->
    <van-dialog v-model="addShopSync" title="添加食品" confirmButtonText="加入购物车">123</van-dialog>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false" />
  </div>
</template>

<script>
export default {
  name: "shop",
  data() {
    return {
      active: 0, //标签页
      activeKey: 0, //侧边栏
      items: [], //侧边标签页
      dialogInfo: false, //提示框
      addShopSync: false, //控制添加食品弹框
      show: false,
      shopData: {}, //商店详情数据
      ballFlag: false //控制小球隐藏
    };
  },
  methods: {
    async getMenu() {
      // http://elm.cangdu.org/shopping/v2/menu因为这个是http的
      const { data: res } = await this.$axios.get(
        "http://elm.cangdu.org/shopping/v2/menu",
        {
          params: { restaurant_id: this.$route.query.id }
        }
      );
      //循环数组,添加属性
      res.forEach(element => {
        element.text = element.name;
        element.children = element.foods;
      });
      this.items = res;
    },
    btn(index) {
      //切换左边标签触发事件
      this.dialogInfo = false;
      window.console.log(index);
    },
    addShop(items) {
      //添加商品
      this.ballFlag = true; //显示小球
      window.console.log(items);
      const shopInfo = {
        id: items._id, //id
        price: items.specfoods[0].price, //价格
        count: 1, //数量
        select: true //默认选中
      };
      this.$store.commit("addCar", shopInfo); //添加到内存购物车中
    },
    addShopDialog() {
      this.addShopSync = true; //打开弹框
      //添加商品打开弹框
    },
    async getShopData() {
      const { data: res } = await this.$axios.get(
        `shopping/restaurant/${this.$route.query.id}`
      );
      this.shopData = res;
    },
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      // shopCar 购物车
      const ball = this.$refs.ball.getBoundingClientRect(); //小球的位置
      const car = this.$refs.shopCar.getBoundingClientRect(); //购物车的位置
      const x = car.left - ball.left;
      const y = car.top - ball.top;
      el.style.transform = `translate(${x}px,${y}px)`;
      el.style.transition = "all 1s ease";
      done();
    },
    afterEnter() {
      this.ballFlag = !this.ballFlag;
    }
  },
  created() {
    this.getMenu();
    this.getShopData();
  }
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/common.styl';

.van-tree-select {
  height: calc(100vh - 177.06px) !important;
}

.icon_ball {
  position: absolute;
  right: 0.04rem;
  bottom: 0.12rem;
  z-index: 1;
}

.shop_car {
  position: fixed;
  left: 50%;
  bottom: 0;
  background-color: #eee;
  color: #f00;
}

.van-sidebar-item--select {
  border-color: $bg-color; // 侧标导航横条色
}

.van-sidebar-item {
  line-height: 1.1rem;
  border-bottom: 0.025rem solid #ededed;
}

.van-tree-select__nav {
  flex: 0.6;
}

.po {
  position: fixed;
  width: 10rem;
  margin-top: 3.25rem;

  // 标题
  .menu_detail_header {
    position: relative;
    height: 1.4rem;
    line-height: 1.4rem;
    background-color: #F5F5F5;

    .menu_item_title {
      font-size: 0.5rem;
      color: #666;
      font-weight: 700;
    }

    .menu_item_description {
      font-size: 0.3rem;
      color: #999;
      width: 30%;
      margin-left: 0.1rem;
      overflow: hidden;
    }

    .description_tip {
      background-color: #39373a;
      opacity: 0.95;
      font-size: 0.3rem;
      line-height: 0.55rem;
      color: #fff;
      position: absolute;
      top: 0.8rem;
      z-index: 14;
      width: 3rem;
      right: 0.05rem;
      padding: 0.05rem 0.05rem;
      border: 1px;
      border-radius: 0.2rem;
    }

    .menu_detail_btn {
      position: absolute;
      color: #999;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  // 商品描述
  .menu_detail_list {
    display: flex;
    flex-direction: row;
    padding: 0.3rem 0.15rem;
    border-bottom: 1px solid #eee;

    .detail_list_info {
      flex: 1;
      font-size: 0.3rem;
      line-height: 0.5rem;

      .detail_info_title {
        display: flex;
        justify-content: space-between;

        p {
          width: 4rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 700;
          font-size: 0.4rem;
        }
      }

      .detail_info_description {
        color: #999;
      }

      .info_price {
        display: flex;
        position: relative;
        justify-content: space-between;

        p {
          font-size: 0.3rem;
          color: #f60;
          font-weight: 700;
          margin-right: 0.05rem;
        }
      }
    }
  }
}

.icon-r {
  margin-right: 10px;
}

.van-hairline--bottom::after {
  border: 0;
}

.van-tag {
  padding: 0.05em 0.1em;
}

.van-nav-bar {
  position: fixed;
  background-color: rgba(0, 0, 0, 0);
  z-index: 11;
  height: 30px;
  line-height: 30px;
}

.van-nav-bar .van-icon {
  color: #fff;
  font-size: 0.6rem;
}

.van-nav-bar__left {
  left: 0;
}

.description {
  display: flex;
  position: fixed;
  width: 10rem;
  z-index: 10;
  top: 0;
  left: 0;
  flex-direction: column;
  padding: 0.3rem 0 0.3rem 0.3rem;
  background-size: cover;
  color: #fff;
  background-color: #999;

  .description-header {
    display: flex;
    justify-content: space-between;
    width: 10rem;

    .description_img {
      width: 1.9rem;
      height: 1.9rem;
    }

    .description_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      h4 {
        font-size: 0.5rem;
      }

      p {
        font-size: 0.3rem;
      }
    }
  }

  .van-icon {
    align-self: center;
  }

  .description-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.3rem;
  }
}
</style>